<template>
  <div class="galary-content">
     <div class="wrapper">
         <div 
         class="imgWrapper"
         v-for="item of imgList[this.index][this.index]"
         :key="item.id"
         ><!-- [this.index][this.index]是ly-tab动态改变的参数，第一个就是00，访问数组，具体参考sbb数组对象数组对象 -->
             <img :src="item.imgUrl"  @click="handlePictureClick">
         </div>
     </div>
     <div 
        class="galary" 
        v-show="show"
        :length="length" 
     >  <!--length是用来统计总共有多少个对象的 -->
         <swiper :options="swiperOption">
            <!-- 轮播图 -->
            <swiper-slide v-for="item of imgList[this.index][this.index]" :key="item.id">
          <!-- 提取字符串中的整数，因为id包含0，所以+1，length是imgList里面访问到的数组的对象的长度 -->
              <div class="galary-desc">{{parseInt(item.id)+1}}/{{length}}</div>
              <div class="galary-img">
                 <img :src="item.imgUrl">
              </div>
            </swiper-slide>
       </swiper>
       <span class="cancelBtn" @click="handleBackClick">X</span>
     </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'  //导入mapState 这个函数
export default {
  name: 'galaryContent',
//   props:{
//       imgList:Array
//   },
  computed:mapState(['index']),//将$store.state.index映射到本组件的this上
  methods:{
      handlePictureClick(){
          //console.log(this.index)
          this.length = this.imgList[this.index][this.index].length
          this.show = true
          
      },
      handleBackClick(){
          this.show=false
      }
  },
  data () {
    return {
       length:'1',
       show:false,
       swiperOption:{
           loop:false
       },
       imgList:[
           {
               0:[
                   {
                       id:"0",
                       imgUrl: require('@/assets/img/louguan.jpg'),
                   },
                    {
                       id:"1",
                       imgUrl: require('@/assets/img/louguan.jpg'),
                   },
                    {
                       id:"2",
                       imgUrl: require('@/assets/img/louguan.jpg'),
                   }
               ]
               
           },
           {
               1:[
                   {
                       id:"0",
                       imgUrl: require('@/assets/img/caishen.jpg'),
                   },
                    {
                       id:"1",
                       imgUrl: require('@/assets/img/caishen.jpg'),
                   },
                    {
                       id:"2",
                       imgUrl: require('@/assets/img/caishen.jpg'),
                   }
               ]
               
           },
           {
               2:[
                   {
                       id:"0",
                       imgUrl: require('@/assets/img/shuijie.png'),
                   },
                    {
                       id:"1",
                       imgUrl: require('@/assets/img/shuijie.png'),
                   },
                    {
                       id:"2",
                       imgUrl: require('@/assets/img/shuijie.png'),
                   }
               ]
               
           },
            {
               3:[
                   {
                       id:"0",
                       imgUrl: require('@/assets/img/qujiang.jpg'),
                   },
                    {
                       id:"1",
                       imgUrl: require('@/assets/img/qujiang.jpg'),
                   },
                    {
                       id:"2",
                       imgUrl: require('@/assets/img/qujiang.jpg'),
                   }
               ]
               
           }
       ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.wrapper
    background:#fff
    .imgWrapper
      width:46%
      background:#aaa
      margin:.12rem
      float:left
    .imgWrapper > img
      width:100%
.galary
  position:absolute
  top:-0.86rem
  left:0
  right:0
  bottom:0
  background:#000
  color:#fff
  text-align :center
  .galary-img
    margin-top:4.5rem
  .galary-img>img
    width:100%
  .swiper-pagination
    color:#fff
    bottom:7.5rem
  .cancelBtn
    font-size:.5rem
    position:relative
    left:.1rem
    bottom:-1rem
  .galary-desc
    position :relative
    top:2rem
</style>
